<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <div id="oDiv"></div>
    <script>
        // 节流：持续触发也执行，只不过触发的频率变低了。
        /* const throttle = (fn, time) => {
            // #1
            let bBar = true
            return function (e) {
                // #2
                if (bBar) {
                    // #3
                    bBar = false
                    setTimeout(() => {
                        fn.call(this, e)
                        // #4
                        bBar = true
                    }, time)
                }
            }
        } */

        /* const throttle = (fn, time) => {
            // #1
            let bBar = true
            return function (e) {
                // #2
                if (!bBar) return
                // #3
                bBar = false
                setTimeout(() => {
                    fn.call(this, e)
                    // #4
                    bBar = true
                }, time)
            }
        } */

        // 需求：封装一个 throttle 函数来实现节流的效果
        oDiv.onmousemove = _.throttle(function (e) {
            let left = e.pageX - this.offsetLeft
            let top = e.pageY - this.offsetTop
            this.innerHTML = `x: ${left}，y: ${top}`
        }, 1000);
    </script>
</body>

</html>